<template>
  <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical"
      default-active="1"
      text-color="#fff"
      @close="handleClose"
      @open="handleOpen"
  >
    <el-row class="demo-avatar demo-basic">
      <div class="block">
        <el-avatar :fit="'cover'" :size="110" :src="squareUrl" class=" " shape="square" @click="toUserInfo"/>
      </div>
    </el-row>
    <el-menu-item index="1" @click="toHomepage">
      <el-icon>
        <HomeFilled/>
      </el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="2" @click="toUserInfo">
      <el-icon>
        <User/>
      </el-icon>
      <span>个人信息</span>
    </el-menu-item>
    <el-menu-item index="3" @click="toSelectPerson">
      <el-icon>
        <Search/>
      </el-icon>
      <span>人员查询</span>
    </el-menu-item>
    <el-sub-menu index="4">
      <template #title>
        <el-icon>
          <Connection/>
        </el-icon>
        <span>项目</span>
      </template>
      <el-menu-item index="4-1" @click="toPM">项目管理</el-menu-item>
      <el-menu-item index="4-2" @click="toNewPM">新建项目</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>
        <el-icon>
          <Edit/>
        </el-icon>
        <span>字典维护</span>
      </template>
      <el-menu-item index="5-1" @click="toDM">字典管理</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import router from '@/router'
import {useUserInfoStore} from '@/stores/User/UserInfo'
import {usePMConfig} from "@/stores/PMConfig";

const PMConfig = usePMConfig()
const UserInfoStore = useUserInfoStore()

const toUserInfo = () => {
  router.push('/home/userinfo')
}
const toPM = () => {
  router.push('/home/programmanagement')
}
const toHomepage = () => {
  router.push('/home/mainbody')
}
const toSelectPerson = () => {
  router.push('/home/selectperson')
}
const toNewPM = () => {
  PMConfig.clearAll()
  router.push('/home/programmanagement/newconfig')
}
const toDM = () => {
  router.push('/home/dictionary')
}

const squareUrl = ref()

const Head = () => {
  squareUrl.value = UserInfoStore.getUserImage()
}
Head()

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
</script>
<style scoped>
.block {
  flex: 1;
  text-align: center;
  margin: 60px auto;
}

.el-menu-vertical {
  height: 100%;
}
</style>
